<template>
    <div class="app_content">
        <div class="table_qy">
            <div class="middle lb_title">用户查询</div>
            <div class="middle cxk_qy" ref="element">
                <el-form :inline="true" :model="listQuery" ref="searchForm" class="demo-form-inline">
                    <el-form-item label="是否自建：">
                        <el-select v-model="listQuery.sfzj" placeholder="请选择" size="mini">
                            <el-option
                                    v-for="item in sfzjOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户状态：">
                        <el-select v-model="listQuery.yhzt" placeholder="请选择" size="mini">
                            <el-option
                                    v-for="item in yhztOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工学号/姓名：">
                        <el-input v-model="listQuery.idxm" placeholder="工学号/姓名" size="mini"></el-input>
                        <!-- v-model 存放属性-->
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search()" size="mini" class="button_search">查询</el-button>
                        <el-button type="info" @click="reset()" size="mini" class="button_reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div style="text-align: left;padding-left: 20px;">
                <el-button type="primary" size="mini" @click="addYh()">新增</el-button>
                <el-button type="danger" size="mini" @click="plscYh()">批量删除</el-button>
            </div>
            <div class="table_padding">
                <div class="table_content">
                    <el-table :data="tableData" stripe border @selection-change="handleSelectionChange"
                              class="table_overflow"
                              :style="{height: scrollerHeight}" style="margin-top: 15px">
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column prop="yhid" label="用户ID" width="100"></el-table-column>
                        <el-table-column prop="xm" label="用户姓名" width="100"></el-table-column>
                        <el-table-column prop="bmmc" label="部门" width="150" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <a v-if="scope.row.bmmc !== undefined">{{scope.row.bmmc}}</a>
                                <a v-else href="javascript:void(0)" @click="addYhbm(scope.row.yhid)">---</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="jsmc" label="角色" width="150"
                                         :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="sjh" label="手机号" width="120"></el-table-column>
                        <el-table-column prop="dzyx" label="电子邮箱" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="sfms" label="身份描述" width="130"></el-table-column>
                        <el-table-column prop="" label="是否自建" width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sfzj === 0">否</span>
                                <span v-else-if="scope.row.sfzj === 1">是</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="可登录方式" width="110">
                            <template slot-scope="scope">
                                <span v-if="scope.row.kdlfs === '1100000000'">适用全部</span>
                                <span v-if="scope.row.kdlfs === '1000000000'">统一身份认证</span>
                                <span v-if="scope.row.kdlfs === '0100000000'">其他身份登录</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="bz" label="备注" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="用户状态" width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.yhzt === 0">停用</span>
                                <span v-else-if="scope.row.yhzt === 1">启用</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cjsj" label="创建时间" width="180"></el-table-column>
                        <el-table-column prop="bgsj" label="变更时间" width="180"></el-table-column>
                        <el-table-column prop="" label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="modifyYh(scope.row)" type="text">修改</el-button>
                                <el-button size="small" type="text" @click="delYh(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--                <div>-->
                <!--                    <SearchPage ref="child" :page_total="this.pageTotal"/>-->
                <!--                </div>-->
                <div class="pageIn">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total,sizes,  prev, pager, next, jumper"
                            :total="pageTotal">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!--新增修改弹窗-->
        <el-dialog :visible.sync="addDialogVisible" width="25%" :title="dialogType === 'edit'?'修改用户':'新增用户'"
                   :close-on-click-modal="false" @close="closeYh('yhForm')">

            <el-form ref="yhForm" :model="yh" :rules="rules" label-width="100px" label-position="right">
                <el-form-item label="用户ID" prop="yhid" v-show="yhidVisible">
                    <el-input v-model="yh.yhid" placeholder="必填" size="mini"/>
                </el-form-item>
                <el-form-item label="用户姓名" prop="xm">
                    <el-input v-model="yh.xm" placeholder="必填" size="mini"/>
                </el-form-item>
                <el-form-item label="密码" prop="mm">
                    <el-input v-model="yh.mm" placeholder="密码为数字或特殊字符" size="mini"/>
                </el-form-item>
                <el-form-item label="手机号" prop="sjh">
                    <el-input v-model="yh.sjh" placeholder="选填" size="mini"/>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="dzyx">
                    <el-input v-model="yh.dzyx" placeholder="选填" size="mini"/>
                </el-form-item>
                <el-form-item label="身份描述" prop="sfms">
                    <el-input v-model="yh.sfms" placeholder="选填" size="mini"/>
                </el-form-item>
                <el-form-item label="是否自建">
                    <el-select v-model="yh.sfzj" placeholder="请选择" size="mini" style="width: 100%">
                        <el-option
                                v-for="item in sfzjOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户状态">
                    <el-select v-model="yh.yhzt" placeholder="请选择" size="mini" style="width: 100%">
                        <el-option
                                v-for="item in yhztOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="可登录方式">
                    <el-select v-model="yh.kdlfs" size="mini" style="width: 100%">
                        <el-option
                                v-for="item in kdlfsOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="bz">
                    <el-input type="textarea" :rows="3" v-model="yh.bz"/>
                </el-form-item>
            </el-form>
            <div style="text-align:center;padding-top: 10px">
                <el-button type="warning" size="mini" @click="closeYh('yhForm')">取消</el-button>
                <el-button type="primary" size="mini" @click="confirm('yhForm')">确定</el-button>
            </div>

        </el-dialog>

        <!--新增用户部门-->
        <el-dialog :visible.sync="addYhbmDialogVisible" width="25%" title="添加部门" :close-on-click-modal="false">
            <div style="height:150px;width: 100%;padding: 10px;">
                <el-form ref="addYhbmForm" :model="yhbm" :rules="yhbmRule" label-width="80px" label-position="right">
                    <el-form-item prop="yhid" v-if="false">
                        <el-input v-model="yhbm.yhid"/>
                    </el-form-item>
                    <el-form-item label="部门" prop="bmm">
                        <el-select v-model="yhbm.bmm" filterable placeholder="请选择" size="mini" style="width: 100%">
                            <el-option
                                    v-for="item in yhbmOptions"
                                    :key="item.bmm"
                                    :label="item.bmmc"
                                    :value="item.bmm">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div style="text-align:center;padding-top: 30px">
                    <el-button type="warning" size="mini" @click="closeYhbm('addYhbmForm')">取消</el-button>
                    <el-button type="primary" size="mini" @click="confirmYhbm('addYhbmForm')">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {findListByPage, findOne, del, add, update, deleteBatchYh, findBmList, addYhbm} from '@/api/app/xtgl0301/yhgl.js' /* 引入接口文件 定义接口别名 */
    // import SearchPage from './SearchPage'
    import {deepClone} from "../../../../utils";

    const defaultYh = {
        yhid: '',
        xm: '',
        mm: '',
        sjh: '',
        dzyx: '',
        sfms: '',
        sfzj: 1,
        kdlfs: '1100000000',
        yhzt: 1,
        sjlybz: '',
        bz: '',
        bmmc: '',
        jsmc: ''
    }

    export default {
        name: "yhgl",
        data() {
            //用户ID校验
            var validateYhid = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入工号'));
                } else {
                    callback();
                }
            }

            //姓名校验
            var validateXm = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入姓名'));
                } else {
                    callback();
                }
            }

            return {
                yh: Object.assign({}, defaultYh),
                scrollerHeight: "",
                listQuery: {
                    sfzj: null,
                    yhzt: null,
                    idxm: null,
                },
                currentPage: 1,                  //初始页
                tableData: [],                  //列表数据集合
                pageTotal: 0,
                pageSize: 10,
                sfzjOptions: [{
                    label: '否',
                    value: 0
                }, {
                    label: '是',
                    value: 1
                }],
                yhztOptions: [{
                    label: '停用',
                    value: 0
                }, {
                    label: '启用',
                    value: 1
                }],
                kdlfsOptions: [{
                    label: '全部',
                    value: '1100000000'
                }, {
                    label: '统一身份认证',
                    value: '1000000000'
                }, {
                    label: '其他身份登录',
                    value: '0100000000'
                }],
                yhSelection: [],    //table多选框数据
                yhidList: [],
                addDialogVisible: false,
                addYhbmDialogVisible: false,
                yhidVisible: true,
                dialogType: 'new',
                yhbm: {
                    yhid: '',
                    bmm: ''
                },
                yhbmOptions: [],
                rules: {
                    yhid: [{required: true, trigger: 'blur', validator: validateYhid}],
                    xm: [{required: true, trigger: 'blur', validator: validateXm}],
                    mm: [{required: true, trigger: 'blur', message: '请输入密码'},
                        {min: 8, message: "密码长度不能少于8位"},
                        {
                            pattern: /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[\W])(?=.*[\S])^[0-9A-Za-z\S]{8,16}$/g,
                            message: '请输入正确的密码格式（必须8-16位且包含大写字母,小写字母,数字,特殊符号）'
                        }
                    ]
                },
                yhbmRule: {
                    bmm: [{required: true, trigger: 'blur', message: '请选择部门'}]
                }
            }
        },
        mounted() {                             //页面初始化加载(只在页面初始时加载一次)
            let height = this.$refs['element'].offsetHeight;
            this.scrollerHeight = (window.innerHeight - height - 255) + 'px';
            this.search();
        },
        methods: {
            async search() {
                let parms = {                    //axios(ajax) 请求参数
                    sfzj: this.listQuery.sfzj,
                    yhzt: this.listQuery.yhzt,
                    idxm: this.listQuery.idxm,
                    page: this.currentPage,
                    pageSize: this.pageSize
                }
                let data = await findListByPage(parms)                          //请求参数路径方法为‘findListByPage’ data返回数据
                this.tableData = data.data.content;
                this.pageTotal = data.data.pageInfo.total;
            },
            //查询条件重置
            reset() {
                this.listQuery.idxm = null;
                this.listQuery.sfzj = null;
                this.listQuery.yhzt = null;
                this.search();
            },
            //每页显示条数改变事件
            handleSizeChange(val) {
                this.pageSize = val;
                this.search();//根据用户获取的每页显示页面数量显示页面
            },
            //当前页数改变事件
            handleCurrentChange(val) {
                this.currentPage = val;
                this.search();//获取用户点击的当前页后刷新页面数据
            },
            //多选框选中赋值
            handleSelectionChange(val) {
                this.yhSelection = val;
            },
            //新增用户
            addYh() {
                this.yh = Object.assign({}, defaultYh);
                this.dialogType = 'new';
                this.yhidVisible = true;
                this.rules.mm[0].required = true;
                this.addDialogVisible = true;
            },
            //关闭窗口时处理
            closeYh(formName) {
                this.$refs[formName].clearValidate();
                this.addDialogVisible = false;
            },
            //删除用户
            delYh(row) {
                this.$confirm('确定删除该用户吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(async () => {
                    let parms = {
                        yhid: row.yhid
                    }
                    let data = await del(parms);

                    if (data.code === 200) {
                        this.$notify({
                            title: '成功',
                            type: 'success',
                            message: '删除成功',
                            dangerouslyUseHTMLString: true
                        });
                        await this.search();
                    } else {
                        this.$notify({
                            title: '失败',
                            type: 'danger',
                            message: '删除失败',
                            dangerouslyUseHTMLString: true
                        });
                    }
                });
            },
            //修改用户信息
            modifyYh(row) {
                this.addDialogVisible = true;
                this.dialogType = 'edit';
                this.yhidVisible = false;
                this.rules.mm[0].required = false;
                this.yh = deepClone(row);
            },
            //新增/修改
            confirm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        if (this.dialogType === 'new') {
                            const data = await findOne({yhid: this.yh.yhid});
                            if (data.data.content !== undefined) {
                                this.$notify({
                                    title: '失败',
                                    type: 'warning',
                                    message: '该用户ID已存在',
                                    dangerouslyUseHTMLString: true
                                });
                                return false;
                            } else {
                                this.$confirm('确定添加该用户吗?', '提示', {
                                    cancelButtonText: '取消',
                                    confirmButtonText: '确定',
                                    type: 'warning'
                                }).then(async () => {
                                    const data = await add(this.yh);

                                    if (data.code === 200) {
                                        this.$notify({
                                            title: '成功',
                                            type: 'success',
                                            message: '添加成功',
                                            dangerouslyUseHTMLString: true
                                        });
                                        this.addDialogVisible = false;
                                        await this.search();
                                    } else {
                                        this.$notify({
                                            title: '失败',
                                            type: 'danger',
                                            message: '添加失败',
                                            dangerouslyUseHTMLString: true
                                        });
                                    }
                                });
                            }
                        } else {
                            this.$confirm('确定修改该用户吗?', '提示', {
                                cancelButtonText: '取消',
                                confirmButtonText: '确定',
                                type: 'warning'
                            }).then(async () => {
                                if (this.yh.mm === undefined) {
                                    delete this.yh.mm;
                                }
                                const data = await update(this.yh);

                                if (data.code === 200) {
                                    this.$notify({
                                        title: '成功',
                                        type: 'success',
                                        message: '修改成功',
                                        dangerouslyUseHTMLString: true
                                    });
                                    this.addDialogVisible = false;
                                    await this.search();
                                } else {
                                    this.$notify({
                                        title: '失败',
                                        type: 'danger',
                                        message: '修改失败',
                                        dangerouslyUseHTMLString: true
                                    });
                                }
                            });
                        }
                    }
                })
            },
            //批量删除
            plscYh() {
                if (this.yhSelection.length === 0) {
                    this.$message({
                        message: '请选择用户',
                        type: 'warning',
                        center: true
                    });
                } else {
                    for (let i = 0; i < this.yhSelection.length; i++) {
                        this.yhidList.push(this.yhSelection[i].yhid);
                    }

                    this.$confirm('确定删除选中的用户吗?', '提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '确定',
                        type: 'warning'
                    }).then(async () => {
                        let parms = {
                            "ids": this.yhidList
                        }
                        let data = await deleteBatchYh(parms);

                        if (data.code === 200) {
                            this.$notify({
                                title: '成功',
                                type: 'success',
                                message: '删除成功',
                                dangerouslyUseHTMLString: true
                            });
                            await this.search();
                        } else {
                            this.$notify({
                                title: '失败',
                                type: 'danger',
                                message: '删除失败',
                                dangerouslyUseHTMLString: true
                            });
                        }
                    });
                }
            },
            //添加用户所在部门
            async addYhbm(yhid) {
                this.yhbm.yhid = yhid;
                let data = await findBmList();
                this.yhbmOptions = data.data.content;
                this.addYhbmDialogVisible = true;
            },
            //关闭用户部门弹窗
            closeYhbm(formName) {
                this.$refs[formName].clearValidate();
                this.addYhbmDialogVisible = false;
            },
            //提交用户部门
            confirmYhbm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        this.$confirm('确定添加该用户部门吗?', '提示', {
                            cancelButtonText: '取消',
                            confirmButtonText: '确定',
                            type: 'warning'
                        }).then(async () => {
                            const data = await addYhbm(this.yhbm);

                            if (data.code === 200) {
                                this.$notify({
                                    title: '成功',
                                    type: 'success',
                                    message: '添加成功',
                                    dangerouslyUseHTMLString: true
                                });
                                this.addYhbmDialogVisible = false;
                                await this.search();
                            } else {
                                this.$notify({
                                    title: '失败',
                                    type: 'danger',
                                    message: '添加失败',
                                    dangerouslyUseHTMLString: true
                                });
                            }
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>
    @import "../../../../styles/app0301.scss";
</style>
